<template>
    <div
        class="addressEdit"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="客户信息维护类-->客户地址资料修改">
            <template slot="cardBody">
                <el-form
                    class="addressForm"
                    ref="addressForm"
                    :model="formData"
                    :rules="rules"
                    label-position="right"
                    size="small"
                    label-width="90px"
                >
                    <el-form-item label="账户类型:" label-width="120px" label-position="left">
                        <span class="el-form-item-span">{{accountType}}</span>
                    </el-form-item>
                    <el-form-item
                        label="账单地址类型:"
                        label-width="120px"
                        label-position="left"
                        prop="STSMAIL"
                    >
                        <div class="form-radio">
                            <el-radio-group v-model="formData.STSMAIL">
                                <el-radio label="H">家庭地址</el-radio>
                                <el-radio label="B">公司地址</el-radio>
                                <el-radio label="F">户籍地址</el-radio>
                                <el-radio label="W">房产地址</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <div class="addressInfo">
                        <!-- 家庭地址 -->
                        <el-card class="box-card">
                            <div slot="headerss" class="clearfix">
                                <span>家庭地址</span>
                            </div>
                            <div class="info">
                                <el-form-item label="所在地:" label-position="left">
                                    <div class="form-radio">
                                        <el-radio-group v-model="formData.AD1OS">
                                            <el-radio :label="'0'">国内</el-radio>
                                            <el-radio :label="'1'">国外</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="邮政编码:" label-position="left">
                                    <el-input v-model="formData.POSTCODE1"></el-input>
                                </el-form-item>

                                <el-form-item label="地址区段1:" label-position="left">
                                    <!-- <el-input v-model="formData.ADD11"></el-input> -->
                                    <el-select
                                        v-model="formData.ADD11"
                                        placeholder="请选择省份"
                                        @change="getCityAddress($event,1)"
                                        value-key="name"
                                    >
                                        <el-option
                                            v-for="item in CITYAddRESS1"
                                            :label="item.name"
                                            :value="item"
                                            :key="item.name"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地址区段2:" label-position="left">
                                    <!-- <el-input v-model="formData.ADD12"></el-input> -->
                                    <el-select
                                        v-model="formData.ADD12"
                                        placeholder="请选择市"
                                        @change="getCityAddressFun($event,1)"
                                        value-key="name"
                                    >
                                        <el-option
                                            v-for="item in CITYAddRESSADD11"
                                            :label="item.name"
                                            :value="item"
                                            :key="item.name"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地址区段3:" label-position="left">
                                    <!-- <el-input v-model="formData.ADD13"></el-input> -->
                                    <el-select
                                        v-model="formData.ADD13"
                                        placeholder="请选择市"
                                        filterable
                                        allow-create
                                        default-first-option
                                    >
                                        <el-option
                                            v-for="item in CITYAddRESSADD12"
                                            :label="item.name"
                                            :value="item.name"
                                            :key="item.name"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地址区段4:" label-position="left">
                                    <el-input v-model="formData.ADD14"></el-input>
                                </el-form-item>
                                <el-form-item label="地址区段5:" label-position="left">
                                    <el-input v-model="formData.ADD15"></el-input>
                                </el-form-item>
                            </div>
                        </el-card>

                        <!-- 公司地址 -->
                        <el-card class="box-card">
                            <div slot="headerss" class="clearfix">
                                <span>公司地址</span>
                            </div>
                            <div class="info">
                                <el-form-item label="所在地:" label-position="left">
                                    <div class="form-radio">
                                        <el-radio-group v-model="formData.AD2OS">
                                            <el-radio :label="'0'">国内</el-radio>
                                            <el-radio :label="'1'">国外</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="邮政编码:" label-position="left">
                                    <el-input v-model="formData.POSTCODE2"></el-input>
                                </el-form-item>

                                <el-form-item label="地址区段1:" label-position="left">
                                    <!-- <el-input v-model="formData.ADD21"></el-input> -->
                                    <el-select
                                        v-model="formData.ADD21"
                                        placeholder="请选择省份"
                                        @change="getCityAddress($event,2)"
                                        value-key="name"
                                    >
                                        <el-option
                                            v-for="item in CITYAddRESS1"
                                            :label="item.name"
                                            :value="item"
                                            :key="item.name"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地址区段2:" label-position="left">
                                    <!-- <el-input v-model="formData.ADD22"></el-input> -->
                                    <el-select
                                        v-model="formData.ADD22"
                                        placeholder="请选择市"
                                        @change="getCityAddressFun($event,2)"
                                        value-key="name"
                                    >
                                        <el-option
                                            v-for="item in CITYAddRESSADD21"
                                            :label="item.name"
                                            :value="item"
                                            :key="item.name"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地址区段3:" label-position="left">
                                    <!-- <el-input v-model="formData.ADD23"></el-input> -->
                                    <el-select
                                        v-model="formData.ADD23"
                                        placeholder="请选择市"
                                        filterable
                                        allow-create
                                        default-first-option
                                    >
                                        <el-option
                                            v-for="item in CITYAddRESSADD22"
                                            :label="item.name"
                                            :value="item.name"
                                            :key="item.name"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地址区段4:" label-position="left">
                                    <el-input v-model="formData.ADD24"></el-input>
                                </el-form-item>
                                <el-form-item label="地址区段5:" label-position="left">
                                    <el-input v-model="formData.ADD25"></el-input>
                                </el-form-item>
                            </div>
                        </el-card>
                    </div>

                    <div class="btnBox">
                        <el-button type="primary" size="small" @click="handleDealTrans(2)">修 改</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            v-if="isShowBtm"
                            @click="handleClickbtn"
                        >修改记录查询</el-button>
                        <el-button type="primary" plain size="small" @click="handleTurnPage">客户信息修改</el-button>
                    </div>
                </el-form>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { getAccountTypeName } from '@/utils/Common';
import { CITYAddRESS1, CITYAddRESS2, CITYAddRESS3, RELEASECAUSE } from '@/utils/Contants';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    // beforeRouteEnter(to, from, next) {
    //     if (from.name === 'addressEdit') {

    //     }
    // },
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false,
            accountType: '', // 账户类型
            isShowBtm: false,
            // 客户地址信息表单
            formData: {
                STSMAIL: '', // 账单地址标志

                // 家庭地址
                POSTCODE1: '', // 地址1邮政编码
                ADD1TYPE: 'H', // 地址1类型 H-家庭
                AD1ST: '', // 地址1省市简称
                AD1OS: '', // 地址1国内/国外标志 0-国内，1-国外；其他值非法
                ADD11: '', //
                ADD12: '', //
                ADD13: '', //
                ADD14: '', //
                ADD15: '', //

                // 公司地址
                POSTCODE2: '', //
                ADD2TYPE: 'B', // B-公司
                AD2ST: '', //
                AD2OS: '', //
                ADD21: '', //
                ADD22: '', //
                ADD23: '', //
                ADD24: '', //
                ADD25: '', //

                // // 户籍地址
                POSTCODE3: '', //
                ADD3TYPE: 'F', // F-户籍
                AD3ST: '', //
                AD3OS: '', //
                ADD31: '', //
                ADD32: '', //
                ADD33: '', //
                ADD34: '', //
                ADD35: '', //

                // // 房产地址
                POSTCODE4: '', //
                ADD4TYPE: 'W', // W-房产
                AD4ST: '', //
                AD4OS: '', //
                ADD41: '', //
                ADD42: '', //
                ADD43: '', //
                ADD44: '', //
                ADD45: '', //
            },
            CITYAddRESS1: '',//城市地址
            CITYAddRESSADD11: '',
            CITYAddRESSADD21: '',
            // CITYAddRESSADD31: '',
            // CITYAddRESSADD41: '',
            CITYAddRESSADD12: '',
            CITYAddRESSADD22: '',
            // CITYAddRESSADD32: '',
            // CITYAddRESSADD42: '',
            // 表单校验
            rules: {

            },
        };
    },

    async mounted() {
        // 查询地址信息
        this.handleDealTrans(1);
        this.CITYAddRESS1 = CITYAddRESS1;
        console.log('this.city', this.city);
        // 获取账户类型
        this.accountType = await getAccountTypeName(this.cardList, this.defaultCard, this);
    },

    // 取缓存信息
    computed: mapState({
        cardList: state => state.common.cardList_3601, // 卡列表信息
        defaultCard: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    methods: {
        // 处理下拉选数据
        getCityAddress(obj, type) {
            console.log('obj', obj, '---type', type);
            switch (type) {
                case 1:
                    this.formData.ADD11 = obj.name;
                    this.CITYAddRESSADD11 = CITYAddRESS2.filter(item => item.parentId === obj.id);
                    break;
                case 2:
                    this.formData.ADD21 = obj.name;
                    this.CITYAddRESSADD21 = CITYAddRESS2.filter(item => item.parentId === obj.id);
                    break;
                // case 3:
                //     this.formData.ADD31 = obj.name;
                //     this.CITYAddRESSADD31 = CITYAddRESS2.filter(item => item.parentId === obj.id);
                //     break;
                // case 4:
                //     this.formData.ADD41 = obj.name;
                //     this.CITYAddRESSADD41 = CITYAddRESS2.filter(item => item.parentId === obj.id);
                //     break;
            }
            // this.city = CITYAddRESS;
            console.log('this.CITYAddRESS2', this.CITYAddRESS2);
        },
        // 处理地址的二级选框
        getCityAddressFun(obj, type) {
            console.log('obj', obj, '---type', type);
            switch (type) {
                case 1:
                    this.formData.ADD12 = obj.name;
                    this.CITYAddRESSADD12 = CITYAddRESS3.filter(item => item.parentId === obj.id);
                    break;
                case 2:
                    this.formData.ADD22 = obj.name;
                    this.CITYAddRESSADD22 = CITYAddRESS3.filter(item => item.parentId === obj.id);
                    break;
                // case 3:
                //     this.formData.ADD32 = obj.name;
                //     this.CITYAddRESSADD32 = CITYAddRESS3.filter(item => item.parentId === obj.id);
                //     break;
                // case 4:
                //     this.formData.ADD42 = obj.name;
                //     this.CITYAddRESSADD42 = CITYAddRESS3.filter(item => item.parentId === obj.id);
                //     break;
            }
        },

        // 3003 交易
        handleDealTrans(optionType) {
            this.pageLoading = true;
            let appBody;
            if (optionType === 1) { //  做查询操作
                appBody = {
                    CARDNBR: this.defaultCard.CARDNO,
                    INQOPT: 1,
                    OPTION: optionType,
                    PINFLAG: this.pinFlag,
                };
            } else { // 做修改操作
                if (!this.checkAddress()) {
                    this.pageLoading = false;
                    return;
                }
                appBody = {
                    ...this.formData,
                    CARDNBR: this.defaultCard.CARDNO,
                    INQOPT: 1,
                    OPTION: optionType,
                    PINFLAG: this.pinFlag,
                };
            }
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '3003';
            params.body.appBody = appBody;

            // 跑 3003 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') { // 交易成功
                        const data = result.body.appBody;
                        console.log(result, 'result -- 3003');
                        // 表单赋值
                        for (const key in this.formData) {
                            if (typeof data[key] == 'string') {
                                this.formData[key] = data[key].trim();
                            } else {
                                this.formData[key] = data[key];
                            }
                        }
                        console.log(this.formData, 'this.formData');
                        if (optionType === 2) {
                            this.isShowBtm = true;
                            // 更新缓存客户地址信息
                            this.$store.commit('common/UPDATE_CUS_ADDR_INFO', data);
                            // 删除缓存组件 -> 客户地址信息查询页面
                            const componentNameList = ['customerIfoChange', 'pretroCustomerInfo', 'customerInfo'];
                            this.$store.commit('tagsView/DELETE_CACHE_VIEWS_ITEM', componentNameList);
                            this.$alert('操作成功!', '提示', {
                                customClass: 'success', type: 'success',
                            });
                        }
                    } else { // 交易失败
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '修改失败', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else { // 请求失败
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },

        // 地址校验
        checkAddress() {
            const { formData } = this;
            let flag = false;
            if (!formData.ADD11.trim() || !formData.ADD12.trim()) {
                this.$alert('家庭地址中的行1,行2不能为空', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            } else if (!formData.ADD21.trim() || !formData.ADD22.trim()) {
                this.$alert('公司地址中的行1,行2不能为空', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            } else if (!formData.ADD31.trim() || !formData.ADD32.trim()) {
                this.$alert('户籍地址中的行1,行2不能为空', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            } else if (!formData.ADD41.trim() || !formData.ADD42.trim()) {
                this.$alert('房产地址中的行1,行2不能为空', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            } else {
                flag = true;
            }
            return flag;
        },

        // 点击跳转页面
        handleTurnPage() {
            this.$router.push({
                path: '/customerInfomationChange/customerInfoChange',
            });
        },
        //修改记录查询
        handleClickbtn() {
            this.$router.push({
                path: '/businessSystem/accountCardDetaileQuery',
            });
        },
    },
};
</script>
<style lang="scss">
.addressEdit {
    .addressForm {
        .el-input {
            width: 100%;
            /* min-width: 200px; */
        }
    }
}
</style>
<style lang="scss" scoped>
.addressEdit {
    .addressForm {
        .addressInfo {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;

            .box-card {
                width: 48%;
                margin-bottom: 30px;
            }
        }
        .btnBox {
            text-align: center;
        }
    }
}
</style>
